<script setup lang="ts">
import { h, defineComponent, onMounted, ref, reactive } from 'vue'
import { NButton, useMessage } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { getTableHright } from '@/utils/autoHeight'
import { useWorktableStore } from '@/stores/worktable'
import { order_Form, Information_Desk, order_Information } from '@/views/order/orderList/orderList-data-table'


const worktableStore = useWorktableStore()
// socket
import { io } from "socket.io-client"
const socket = io('http://localhost:3000')
socket.on('worktable', res => {
	// console.log(res);
	const { orderAll, orderUnpay, serveTable, freeTable, totalTable } = res
	worktableStore.orderAll = orderAll
	worktableStore.serveTable = serveTable
	worktableStore.freeTable = freeTable
	worktableStore.totalTable = totalTable
	worktableStore.orderUnpay = orderUnpay
})

onMounted(() => {
	socket.emit('pay', {})
})

const { getHeight } = getTableHright(400)

// 表格
const columns = [{
	// title: "时间",
	key: "ids",
	align: 'center',
	width: '80',
	render: (_: any, index: number) => {
		return worktableStore.orderAll[index]?.time.split(' ')[1]
	}
},
{
	// title: "桌号",
	key: "number",
	align: 'center',
	width: '150',
	render: (_: any, index: number) => {
		return `桌号${worktableStore.orderAll[index]?.tableNum}已下单`
	}
},
{
	// title: "查看",
	key: "operate",
	// align: 'center',
	width: '60',
	render(row: any) {
		return [h(
			NButton, {
			ghost: true,
			strong: true,
			tertiary: true,
			type: 'primary',
			size: 'small',
			color: '#18a058',
			style: {
				padding: 6
			},
			onClick: () => check(row)
		}, {
			default: () => '查看'
		}
		),
		]
	}
},
{
	// title: "打印小票",
	key: "operate",
	align: 'center',
	width: '80',
	render(row: any) {
		return [h(
			NButton, {
			ghost: true,
			strong: true,
			tertiary: true,
			type: 'primary',
			size: 'small',
			color: '#18a058',
			style: {
				padding: 6
			},
			onClick: () => CheckTable(row)
		}, {
			default: () => '打印小票'
		}
		),
		]
	}
},
]

// 释放台桌
const openTable = async (orderInfo) => {
	// 通过桌号获取id
	const res = await worktableStore.getTableId(orderInfo.tableNum)
	const tableInfo = res.data[0]
	// 修改台桌状态
	await worktableStore.modifyTable(tableInfo)
	// 修改订单状态
	await worktableStore.modifyOrder(orderInfo)
	socket.emit('pay', {})
}

const openTable2 = async () => {
	openTable(FormInformation.StageDes[0])
	showModal.value = false
}

//桌台表格
const InformationDesk = [
	...Information_Desk,
	{
		title: "操作",
		key: "operate",
		align: "center",
		render(row: any) {
			return h(
				NButton,
				{
					strong: true,
					type: 'primary',
					size: 'small',
					onClick: () => changeBtn(row)
				},
				{ default: () => '更换台座' }
			)
		}
	}
]

//点击查看按钮 点击关闭
const showModal = ref(false)
const FormInformation = reactive({
	StageDes: [],
	cuisine: [],
	order: []
})
const close = () => {
	showModal.value = false
}
function check(row: any) {
	// console.log(row);
	FormInformation.StageDes = []
	FormInformation.order = []
	const { _id, dishInfo, index, notes, peopleNum, status, tableNum, time, totalMoney } = row
	FormInformation.StageDes.push({ _id, tableNum, totalMoney, peopleNum, dishInfo, notes, status })
	FormInformation.cuisine = dishInfo
	FormInformation.order.push({ dishInfo, time, totalMoney, index })
	showModal.value = true
}

//菜品信息表格
const FoodInformation = [
	{
		title: '菜品信息',
		align: "center",
		render(row: any) {
			return h(
				'span',
				{},
				{ default: () => `${row.name}` }
			)
		}
	},
	{
		title: '原价',
		align: "center",
		render(row: any) {
			return h(
				'span',
				{},
				{ default: () => `${row.price}` }
			)
		}
	},
	{
		title: '折扣',
		align: "center",
		render(row: any) {
			return h(
				'span',
				{},
				{ default: () => `---` }
			)
		}
	},
	{
		title: '现价',
		align: "center",
		render(row: any) {
			return h(
				'span',
				{},
				{ default: () => `${row.price}` }
			)
		}
	}
]
//订单信息表格
const orderInformation = [
	...order_Information,
	{
		title: '优惠金额',
		align: "center",
		render(row: any) {
			return h(
				'span',
				{},
				{ default: () => '---' }
			)
		}
	},
	{
		title: '支付方式',
		align: "center",
		render(row: any) {
			return h(
				'span',
				{},
				{ default: () => '在线支付' }
			)
		}
	}
]
//更换台座
const pedestalfrom = reactive({
	tableNum: ''
})
const pedestal = ref(false)
const orderInfo = ref()
const changeBtn = (row: any) => {
	orderInfo.value = row
	Object.assign(pedestalfrom, row)
	pedestal.value = true
}

async function confirmBtn() {
	// 修改订单桌号
	// 修改原桌号状态为空闲
	// 修改新桌号状态为使用
	await worktableStore.modifyTableNum(FormInformation.StageDes[0], pedestalfrom.tableNum, orderInfo.value)
	socket.emit('pay', {})
	pedestal.value = false
}

// 选中桌号
const getTableid = (e: any) => {
	pedestalfrom.tableNum = worktableStore.freeTable.find(v => {
		return v.number == e
	})
}

const cancel = () => {
	pedestal.value = false
}
</script>

<template>
	<div class="wp-nav">
		<n-grid x-gap="12" :cols="2" style="margin-top: 15px; background-color: #fff;">
			<n-gi>
				<div style="width: 98%;">
					<n-layout>
						<n-layout-header>
							<div class="box-nav">
								<span class="sp"></span>
								<span class="sp2">台桌统计</span>
							</div>
						</n-layout-header>
						<n-layout has-sider class="content">
							<n-grid x-gap="12" :cols="3">
								<n-gi>
									<div class="box">
										<div class="box-top">全部</div>
										<div class="box-number">{{ worktableStore.totalTable.length }}</div>
									</div>
								</n-gi>
								<n-gi>
									<div class="box middle">
										<div class="box-top m-top">使用中</div>
										<div class="box-number">{{ worktableStore.serveTable.length }}</div>
									</div>
								</n-gi>
								<n-gi>
									<div class="box right">
										<div class="box-top r-top">闲置</div>
										<div class="box-number">{{ worktableStore.freeTable.length }}</div>
									</div>
								</n-gi>
							</n-grid>
						</n-layout>
					</n-layout>
				</div>
			</n-gi>
			<n-gi>
				<div style="width: 90%;margin-left: 40px;">
					<n-layout>
						<n-layout-header>
							<div class="box-nav">
								<span class="sp"></span>
								<span class="sp2">最新消息</span>
							</div>
						</n-layout-header>
						<n-layout has-sider class="content">
							<n-data-table :style="{ height: `${getHeight}px` }" :columns="columns"
								:data="worktableStore.orderAll" :bordered="false" />
						</n-layout>
					</n-layout>
				</div>
			</n-gi>
		</n-grid>
	</div>
	<div class="wp-nav wp-nav2">
		<n-grid x-gap="12" :cols="1" style="margin-top: 15px; background-color: #fff;">
			<n-gi>
				<div style="width: 98%;">
					<n-layout>
						<n-layout-header>
							<div class="box-nav">
								<span class="sp"></span>
								<span class="sp2">台桌概况</span>
							</div>
						</n-layout-header>
						<n-layout has-sider class="content" style="height: 600px;">
							<n-grid x-gap="12" :cols="5">
								<n-gi v-for="item in worktableStore.orderUnpay">
									<div class="table-box">
										<div class="table-top">
											<span class="status">使用中</span>
											<n-button text @click="openTable(item)">
												释放台桌
											</n-button>
										</div>
										<div class="table-middle">
											<p class="table-hao">{{ item.tableNum }}号桌</p>
											<div class="ren-shu">{{ item.peopleNum }}人就餐</div>
											<div class="look">
												<n-button type="primary" style="width: 150px;" @click="check(item)">
													查看
												</n-button>
											</div>
										</div>
									</div>
								</n-gi>
								<n-gi v-for="item in worktableStore.freeTable">
									<div class="table-box">
										<div class="table-top">
											<span class="free">空闲中</span>
										</div>
										<div class="table-middle">
											<p class="table-free">{{ item.number }}号桌</p>
											<div class="table-cut">{{ item.cut }}</div>
										</div>
									</div>
								</n-gi>
							</n-grid>
						</n-layout>
					</n-layout>
				</div>
			</n-gi>

		</n-grid>
	</div>
	<!-- 点击查看弹出框 -->
	<n-modal v-model:show="showModal">
		<n-card style="width: 950px" class="modal_card" title="使用中" :bordered="false" size="huge" role="dialog"
			aria-modal="true">
			<template #header-extra>
				<section class="modal_card_btn">
					<n-button type="tertiary" @click="openTable2(FormInformation.StageDes)">
						释放台桌
					</n-button>
					<n-button type="primary">
						打印小票
					</n-button>
					<n-button type="error" @click="close">
						关闭
					</n-button>
				</section>
			</template>
			<n-space vertical size="large">
				<n-layout>
					<n-layout-header>台卓信息</n-layout-header>
					<n-layout-content style="margin-top: 15px;">
						<n-data-table :single-line="false" single-column :columns="InformationDesk"
							:data="FormInformation.StageDes" />
					</n-layout-content>
				</n-layout>
				<n-layout>
					<n-layout-header>菜品信息</n-layout-header>
					<n-layout-content style="margin-top: 15px;">
						<n-data-table striped :single-line="false" single-column :columns="FoodInformation"
							:data="FormInformation.cuisine" />
					</n-layout-content>
				</n-layout>
				<n-layout>
					<n-layout-header>订单信息</n-layout-header>
					<n-layout-content style="margin-top: 15px;">
						<n-data-table striped :single-line="false" single-column :columns="orderInformation"
							:data="FormInformation.order" />
					</n-layout-content>
				</n-layout>
			</n-space>
		</n-card>
	</n-modal>

	<n-modal v-model:show="pedestal" preset="dialog" :mask-closable="false">
		<template #header>
			<div>更换台桌</div>
		</template>
		<n-form ref="pedestalfromRef" label-placement="left" :model="pedestalfrom">
			<el-select v-model="pedestalfrom.tableNum" placeholder="请输入桌号" @change="getTableid">
				<el-option v-for="item in worktableStore.freeTable" :key="item['_id']" :label="item['number']"
					:value="item['number']" />
			</el-select>
		</n-form>
		<template #action>
			<div>
				<n-button @click="cancel">取消</n-button>
				<n-button type="primary" @click="confirmBtn">
					确定
				</n-button>
			</div>
		</template>
	</n-modal>
</template>

<style scoped>
.look {
	margin-top: 10px;
	height: 50px;
	line-height: 50px;
}

.ren-shu {
	height: 10px;
	line-height: 10px;
	font-size: 13px;
	padding-top: 8px;
}

.table-cut {
	height: 10px;
	line-height: 10px;
	font-size: 13px;
	padding-top: 8px;
	color: #666;
}

.table-hao {
	height: 45px;
	line-height: 45px;
	padding-top: 20px;
	margin: 0;
	font-size: 30px;
}

.table-free {
	height: 45px;
	line-height: 45px;
	padding-top: 20px;
	margin: 0;
	font-size: 30px;
	color: #666;
}

.table-middle {
	height: 105px;
	line-height: 105px;
	font-size: 35px;
	/* color: #fff; */
}

.status {
	display: inline-block;
	width: 63px;
	height: 23px;
	background-color: #ff6633;
	line-height: 25px;
	margin-top: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	font-size: 14px;
}

.free {
	display: inline-block;
	width: 63px;
	height: 23px;
	background-color: #ccc;
	line-height: 25px;
	margin-top: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	font-size: 14px;
}

.table-top {
	height: 43px;
	line-height: 43px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	margin-right: 15px;
	font-size: 16px;
}

.table-box {
	width: 175px;
	height: 205px;
	text-align: center;
	background-color: #e9eff5;
	/* border-radius: 5px; */
	margin-top: 30px;
}

.box-number {
	height: 105px;
	line-height: 105px;
	font-size: 35px;
	color: #fff;
}

.box-top {
	height: 50px;
	line-height: 50px;
	color: #fff;
	/* padding: 0 5px; */
	margin: 0 5px;
	font-size: 16px;
	border-bottom: 1px solid #85b2f6;
}

.box {
	width: 146px;
	height: 145px;
	text-align: center;
	background-color: #6d9de7;
	border-radius: 5px;
	margin-top: 15px;
}

.right {
	background-color: #ffa28f;
}

.r-top {
	border-bottom: 1px solid #ff917b;
}

.middle {
	background-color: #85b2f6;
}

.m-top {
	border-bottom: 1px solid #6d9de7;
}

.wp-nav {
	width: 100%;
	/* height: 100%; */
	padding: 10px 10px 15px 20px;
	/* background-color:#ccc; */
	/* border: 1px solid #ccc; */
}

.wp-nav2 {
	margin-top: 20px;
}

.content {
	height: 177px;
	/* padding-top: 30px; */
	/* border: 1px solid #fafafc; */
	border-top: 1px solid #eee;
	/* padding-left: 20px; */
}

.box-nav {
	width: 100%;
	height: 32px;
	/* background-color: #e9eff5; */
	line-height: 32px;
	/* padding-left: 20px; */
	display: flex;
	justify-content: flex-start;
}

.sp {
	width: 6px;
	height: 17px;
	/* line-height: 19px; */
	display: inline-block;
	background-color: #f97d5f;
	margin-right: 7px;
	margin-top: 6px;
}

.sp2 {
	height: 32px;
	line-height: 32px;
	display: inline-block;
}

.modal_card_btn button {
	margin-left: 15px;
}
</style>
